<template>
    <div class="loanDocumentation">
      <ul class="items-wrapper">
        <li class="item">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10:54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item isRefund">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item isRefund">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item isRefund">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item isRefund">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
        <li class="item">
          <div class="left">
            <div class="icon-wrapper"></div>
          </div>
          <div class="right">
            <div class="text">
              <p class="name">贷款金额</p>
              <p class="time">2017年11月08日 10：54</p>
            </div>
            <div class="count">1000.00元</div>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "loanDocumentation"
    }
</script>

<style scoped lang="stylus">
  .loanDocumentation
    height calc(100% - 64px)
    padding 10px
    background #f4f4f4
    overflow auto
    .items-wrapper
      background #ffffff
      border-radius 6px
      .item
        height 72px
        display flex
        &:last-child
          .right
            border-bottom none
        &.isRefund
          .left
            .icon-wrapper
              background #53B658 url("qian.svg") no-repeat center /17px 21px
          .right
            .count
              color #53B658
        .left
          flex 0 0 60px
          text-align center
          overflow hidden
          .icon-wrapper
            margin 18px auto
            height 35px
            width 35px
            border-radius 50%
            background #FF723F url("qian.svg") no-repeat center /17px 21px
        .right
          flex 1
          display flex
          border-bottom 1px solid #dddddd
          margin-right 12px
          .text
            flex 0 0 138px
            text-align left
            .name
              font-size 14px
              height 14px
              padding-top 23px
              padding-bottom 3px
              color #333333
            .time
              font-size 12px
              color #676767
          .count
            flex 1
            line-height 72px
            text-align right
            padding-right 15px
            font-size 12px
            color #FF723F
            background url("icon_arrow_right.svg") no-repeat 100% center/5px 12px

</style>
